<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    {{message}}
</div>

</body>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
            message:'Vue的生命周期'
        },
        beforeCreate:function () {
            console.group('---beforeCreate创建前状态--');
            console.log("%c%s","color:red","el :"+this.$el);
            console.log("%c%s","color:red","date"+this.$data);
            console.log("%c%s","color:red","message:"+this.message)
        },
        created:function () {
            console.group('---created创建完毕状态--');
            console.log("%c%s","color:red","el :"+this.$el);
            console.log("%c%s","color:red","date"+this.$data);
            console.log("%c%s","color:red","message:"+this.message)
        },
        beforeMount:function () {
            console.group('---beforeMount挂载前状态--');
            console.log("%c%s","color:red","el :"+this.$el);
            console.log("%c%s","color:red","date"+this.$data);
            console.log("%c%s","color:red","message:"+this.message)
        },
        mounted:function () {
            console.group('---mounted挂载结束状态--');
            console.log("%c%s","color:red","el :"+this.$el);
            console.log("%c%s","color:red","date"+this.$data);
            console.log("%c%s","color:red","message:"+this.message)
        },
        beforeUpdate:function () {
            console.group('---beforeUpdate更新前状态--');
            let dom = document.getElementById("app").innerHTML;
            console.log(dom);
            console.log("%c%s","color:red","el :"+this.$el);
            console.log(this.$el);
            console.log("%c%s","color:red","date"+this.$data);
            console.log("%c%s","color:red","message:"+this.message)
        },
        updated:function () {
            console.group('---updated更新完成状态--');
            let dom = document.getElementById("app").innerHTML;
            console.log(dom);
            console.log("%c%s","color:red","el :"+this.$el);
            console.log(this.$el);
            console.log("%c%s","color:red","date"+this.$data);
            console.log("%c%s","color:red","message:"+this.message)
        },
        beforeDestroy:function () {
            console.group('---beforeDestroy销毁前状态--');
            console.log("%c%s","color:red","el :"+this.$el);
            console.log(this.$el);
            console.log("%c%s","color:red","date"+this.$data);
            console.log("%c%s","color:red","message:"+this.message)
        },
        destroyed:function () {
            console.group('---destroyed销毁完成状态--');
            console.log("%c%s","color:red","el :"+this.$el);
            console.log(this.$el);
            console.log("%c%s","color:red","date"+this.$data);
            console.log("%c%s","color:red","message:"+this.message)
        }
    });
    //销毁Vue对象
    vm.$destroy();
    vm.message="hehe";//销毁后vue实例会解绑所有内容
    //设置data中message数据值
    // vm.message="good...";
</script>
</html>